<template>
	<image v-if="collectState===1" src="@/static/svg/activity/icon-collect-default.svg" style="width:32px;height:32px;"
		@click.stop="toCollect"></image>
	<image v-else src="@/static/svg/activity/icon-collect-active.svg" style="width:32px;height:32px;"
		@click.stop="toCancelCollect"></image>
</template>

<script setup>
	import {
		activeCollectUpdateStateApi
	} from '@/api/activity.js'

	const props = defineProps({
		userId: {
			type: Number
		},
		activeId: {
			type: Number
		},
		collectState: {
			type: Number,
			default: 1 // 收藏状态：1-未收藏，2-已收藏
		}
	})

	const emits = defineEmits(['onStateChange'])

	const toCollect = () => {
		if (props.userId) {
			activeCollectUpdateStateApi({
				userId: props.userId,
				activeId: props.activeId,
				collectState: 1 // 收藏状态：1-收藏，2-取消收藏
			}).then(res => {
				if (res) {
					uni.showToast({
						icon: 'none',
						title: '收藏成功'
					})
				}
				emits('onStateChange', res)
			}).catch(console.error)
		} else {
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
		}
	}

	const toCancelCollect = () => {
		activeCollectUpdateStateApi({
			userId: props.userId,
			activeId: props.activeId,
			collectState: 2 // 收藏状态：1-收藏，2-取消收藏
		}).then(res => {
			if (res) {
				uni.showToast({
					icon: 'none',
					title: '取消收藏成功'
				})
			}
			emits('onStateChange', res)
		}).catch(console.error)
	}
</script>